<template>
    <a-config-provider :get-popup-container="popContainer" :locale="locale">
        <router-view/>
    </a-config-provider>
</template>

<script>
import {enquireScreen} from './utils/util'
import {mapState, mapMutations} from 'vuex'
import themeUtil from '@/utils/themeUtil';
import {getI18nKey} from '@/utils/routerUtil'
import {logout} from '@/services/user'

export default {
    name: 'App',
    data() {
        return {
            locale: {},
            beforeUnload_time: null,
        }
    },
    created() {
        this.setHtmlTitle()
        this.setLanguage(this.lang)
        enquireScreen(isMobile => this.setDevice(isMobile))
    },
    mounted() {
        this.setWeekModeTheme(this.weekMode)
        window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.addEventListener('unload', e => this.unloadHandler(e))
    },
    destroyed() {
        window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.removeEventListener('unload', e => this.unloadHandler(e))
    },
    watch: {
        weekMode(val) {
            this.setWeekModeTheme(val)
        },
        lang(val) {
            this.setLanguage(val)
            this.setHtmlTitle()
        },
        $route() {
            this.setHtmlTitle()
        },
        'theme.mode': function (val) {
            let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
            themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
        },
        'theme.color': function (val) {
            let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
            themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
        },
        'layout': function () {
            window.dispatchEvent(new Event('resize'))
        }
    },
    computed: {
        ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang'])
    },
    methods: {
        ...mapMutations('setting', ['setDevice']),
        beforeunloadHandler() {
            this.beforeUnload_time = new Date().getTime();
        },
        unloadHandler() {

            let gap_time = new Date().getTime() - this.beforeUnload_time;

            //判断是窗口关闭还是刷新
            if (gap_time <= 5) {
                //如果是登录状态，关闭窗口前，移除用户
                logout()

                alert("不是刷新")
            } else {
                console.log("这他妈是刷新");
            }

        },
        setWeekModeTheme(weekMode) {
            if (weekMode) {
                document.body.classList.add('week-mode')
            } else {
                document.body.classList.remove('week-mode')
            }
        },
        setLanguage(lang) {
            this.$i18n.locale = lang
            switch (lang) {
                case 'CN':
                    this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default
                    break
                case 'HK':
                    this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
                    break
                case 'US':
                default:
                    this.locale = require('ant-design-vue/es/locale-provider/en_US').default
                    break
            }
        },
        setHtmlTitle() {
            const route = this.$route
            const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
            document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
        },
        popContainer() {
            return document.getElementById("popContainer")
        }
    }
}
</script>

<style lang="less" scoped>
#id {
}
</style>
